<template>
  <div class="app-container layout-container">
    <Breadcrumb />
    <div class="container">
      <div class="side">
        <div class="title app-container">
          <div class="dot"></div>参数设置
        </div>
        <div class="list">
          <div :class="{ line: true, active: form.ruleId == item.ruleId }" v-for="item in remindData" :key="item.ruleId"
            @click="activeItem(item)">
            <span>{{ remind[item.remindType-1] }}</span>
            <a-switch v-model="item.status" :unchecked-value="0" :checked-value="1" @change="changeStatus(item)" />
          </div>
        </div>
      </div>
      <div class="table">
        <div class="title app-container" >
          <div class="dot"></div>{{ remind[form.remindType-1] }}
          <a-button  v-if="isSave" style="margin-left: auto" type="primary" @click="save">保存</a-button>
          <!-- <div class="right" v-if="data.length!=0">是否启用<a-switch v-model="form.status" :unchecked-value="0" :checked-value="1" @change="isSave=true"/></div> -->
        </div>
        <div class="one" v-if="remindData.length">
          <div class="system-title">提醒规则</div>
          <div class="content">
            <div>
              <div class="">提醒频率</div>
              <div>
                <a-radio-group v-model="form.remindNum" @change="isSave=true">
                  <a-radio :value="1">一次</a-radio>
                </a-radio-group>
              </div>
            </div>
            <div>
              <div class="">提醒时间</div>
              <div>
                <a-radio-group v-model="form.timeType" @change="isSave=true">
                  <a-radio :value="1">即时提醒</a-radio>
                  <a-radio :value="2">固定时间</a-radio>
                </a-radio-group>
                <a-time-picker v-model="form.goodTime" v-if="form.timeType == 2" default-value="00:00" format="HH:mm" size="small"
                  style="width: 120px;" :allow-clear="false" @change="isSave=true"/>
              </div>
            </div>
          </div>
        </div>
        <div class="divider" v-if="remindData.length"></div>
        <div class="two" v-if="remindData.length">
          <div class="system-title">提醒对象</div>
          <div class="obj">工作对象</div>
          <a-checkbox-group v-model="form.reviceUserTypes" @change="isSave=true">
            <a-checkbox value="1">责任人</a-checkbox>
            <a-checkbox value="2">责任人部门负责人</a-checkbox>
          </a-checkbox-group>
        </div>
        <div class="divider" v-if="remindData.length"></div>
        <div class="three" v-if="remindData.length">
          <div class="system-title">提醒方式</div>
          <a-checkbox-group v-model="form.remindModes" @change="isSave=true">
            <a-checkbox value="1">系统信息</a-checkbox>
            <a-checkbox value="2">短信通知</a-checkbox>
            <a-checkbox value="3">电话通知</a-checkbox>
          </a-checkbox-group>
        </div>
<!--        <div class="btn-box" v-if="isSave">-->
<!--          <a-button>取消</a-button>-->
<!--          <a-button type="primary" @click="save">保存</a-button>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import { getRemindList, setRemind,setRemindStatus } from "@/apis/remind";
import type { RemindItem } from "@/apis/remind/type";
import { Message } from "@arco-design/web-vue";
import _ from "lodash";

const form = ref<RemindItem>({
  ruleId: '',
  remindType:0,
  status: 1,
  timeType:1,
  goodTime:'',
  reviceUserTypes: [1],
  remindModes: [1],
  remindNum: ''
})
const isSave=ref(false)
/**提醒类型 */
const remind = ['分配提醒', '移交提醒', '任务逾期提醒']
const remindData = ref<RemindItem[]>([]);
/**
 * 初始化
 */
const init = async () => {
  const { data } = await getRemindList();
  remindData.value = data ?? [];
  if (remindData.value.length) {
    form.value = form.value.remindType != 0 ? remindData.value.filter(v=>v.remindType==form.value.remindType)[0]:{ ...remindData.value[0] };
    handelData();
  }
}
const  handelData = ()=>{
  const remindModes = form.value.remindModes?.split(',') || [];
  const reviceUserTypes = form.value.reviceUserTypes?.split(',') || [];
  form.value.remindModes = remindModes;
  form.value.reviceUserTypes = reviceUserTypes;
}
/**
 * 切换提醒类型
 */
const activeItem = (item: RemindItem) => {
  form.value = { ...item };
  isSave.value = false;
  handelData();
}
/**
 * 保存修改
 */
const save = async () => {
  const postData:any = _.cloneDeep(form.value);
  postData.reviceUserTypes = form.value.reviceUserTypes?.join(',') || "" ;
  postData.remindModes = form.value.remindModes?.join(',') || "" ;
  postData.goodTime = form.value.timeType == 1 ? '' : form.value.goodTime ? form.value.goodTime :'00:00';
  await setRemind(postData);
  Message.success('修改成功')
  init()
}
const changeStatus = async (item: RemindItem) => {
  await setRemindStatus(item.ruleId,item.status);
  Message.success('修改成功')
  init()
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
@import "index";
</style>
